import * as THREE from 'three'
import { gui } from '../gui'
import { stats } from '../stats'

function createCourse07 (dom: HTMLElement) {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.1, 1000)

  const render = new THREE.WebGLRenderer()
  render.setClearColor(new THREE.Color(0x000000))
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  // show axes in the screen
  const axes = new THREE.AxesHelper(50)
  scene.add(axes)

  const boxGeo = new THREE.BoxGeometry(8, 8, 8) // 几何体
  const boxMaterial = new THREE.MeshLambertMaterial({ color: 0xff2288 }) // 材质
  const cube = new THREE.Mesh(boxGeo, boxMaterial) // 网格
  cube.castShadow = true

  cube.position.x = 34
  cube.position.y = 8
  cube.position.z = 10

  // scene.add(cube);
  const refGeo = new THREE.BoxGeometry(8, 8, 8) // 几何体
  const refmaterial = new THREE.MeshLambertMaterial({ color: 0xff2288 }) // 材质
  const refcube = new THREE.Mesh(refGeo, refmaterial) // 网格
  refcube.castShadow = true

  refcube.position.x = 0
  refcube.position.y = 10
  refcube.position.z = 0
  scene.add(refcube)

  const showGeo = new THREE.BoxGeometry(8, 8, 8) // 几何体
  const showmaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 }) // 材质
  const showcube = new THREE.Mesh(showGeo, showmaterial) // 网格
  showcube.castShadow = true

  showcube.position.x = 0
  showcube.position.y = 10
  showcube.position.z = 0
  scene.add(showcube)

  const ctrlObj = {
    scaleX: 1,
    scaleY: 1,
    scaleZ: 1,
    positionX: 0,
    positionY: 10,
    positionZ: 0,
    rotationX: 0,
    rotationY: 0,
    rotationZ: 0,
    visible: true,
    translateX: 0,
    translateY: 0,
    translateZ: 0
  }

  gui.add(ctrlObj, 'scaleX', 0, 5)
  gui.add(ctrlObj, 'scaleY', 0, 5)
  gui.add(ctrlObj, 'scaleZ', 0, 5)

  gui.add(ctrlObj, 'positionX', -30, 30)
  gui.add(ctrlObj, 'positionY', -30, 30)
  gui.add(ctrlObj, 'positionZ', -30, 30)

  gui.add(ctrlObj, 'rotationX', -5, 5)
  gui.add(ctrlObj, 'rotationY', -5, 5)
  gui.add(ctrlObj, 'rotationZ', -5, 5)

  gui.add(ctrlObj, 'visible')

  gui.add(ctrlObj, 'translateX', -25, 25)
  gui.add(ctrlObj, 'translateY', -25, 25)
  gui.add(ctrlObj, 'translateZ', -25, 25)

  // 圆环几何体
  const torusgeo = new THREE.TorusGeometry(10, 2, 10, 10)
  const torusmaterial = new THREE.MeshLambertMaterial({ color: 0xff2288 })
  const torus = new THREE.Mesh(torusgeo, torusmaterial)
  torus.castShadow = true
  torus.position.x = 20
  torus.position.y = 10
  torus.position.z = -20
  // scene.add(torus);

  // 圆柱几何体
  const cylindergeo = new THREE.CylinderGeometry(4, 4, 14)
  const cylindermaterial = new THREE.MeshLambertMaterial({ color: 0xff2288 })
  const cylinder = new THREE.Mesh(cylindergeo, cylindermaterial)
  cylinder.castShadow = true
  cylinder.position.x = -10
  cylinder.position.y = 10
  cylinder.position.z = -20
  // scene.add(cylinder);

  // 自定义几何体
  //   const geometry = new THREE.BufferGeometry()
  //   const vertices = new Float32Array([
  //     // 第一个面
  //     0, 0, 0,
  //     10, 0, 0,
  //     0, 10, 0,
  //     10, 0, 0,
  //     0, 10, 0,
  //     10, 10, 0,
  //     // 第二个面
  //     0, 0, 0,
  //     0, 10, 0,
  //     0, 10, 10,
  //     0, 10, 10,
  //     0, 0, 0,
  //     0, 0, 10,
  //     // 第三个面
  //     10, 0, 0,
  //     10, 10, 0,
  //     10, 10, 10,
  //     10, 0, 0,
  //     10, 0, 10,
  //     10, 10, 10,
  //     // 第四个面
  //     0, 0, 0,
  //     0, 0, 10,
  //     10, 0, 0,
  //     10, 0, 0,
  //     10, 0, 10,
  //     0, 0, 10,
  //     // 第五个面
  //     0, 10, 0,
  //     0, 10, 10,
  //     10, 10, 0,
  //     10, 10, 0,
  //     10, 10, 10,
  //     0, 10, 10,
  //     // 第六个面
  //     0, 0, 10,
  //     10, 0, 10,
  //     0, 10, 10,
  //     10, 0, 10,
  //     0, 10, 10,
  //     10, 10, 10,
  //     // 第七个面
  //     10, 10, 0,
  //     0, 10, 0,
  //     2, 20, 5,
  //     // 第八个面
  //     0, 10, 0,
  //     0, 10, 10,
  //     2, 20, 5,
  //     // 第九个面
  //     0, 10, 10,
  //     10, 10, 10,
  //     2, 20, 5,
  //     // 第十个面
  //     10, 10, 10,
  //     10, 10, 0,
  //     2, 20, 5
  //   ])

  //   const attribute = new THREE.BufferAttribute(vertices, 3)
  //   geometry.attributes.position = attribute
  //   const material = new THREE.MeshBasicMaterial({
  //     color: 0x0000ff,
  //     side: THREE.DoubleSide
  //   })

  // const mesh = new THREE.Mesh(geometry, material)
  // scene.add(mesh)

  // const wireFrame = new THREE.WireframeGeometry(geometry)
  // const line = new THREE.LineSegments(wireFrame)
  // line.material.depthTest = true
  // line.material.transparent = false;
  // line.material.opacity = 0.5;
  // scene.add(line);

  // 克隆方法
  // var ctrl = new dat.GUI();
  // ctrl.add(new function(){
  //     this.clone = function(){
  //         var cloneGeometry = mesh.geometry.clone();
  //         var clonematerial = new MeshBasicMaterial({
  //             color:0xff0000,
  //             side:DoubleSide,
  //         });

  //         var clonemesh = new Mesh(cloneGeometry,clonematerial);
  //         clonemesh.translateZ(20);
  //         clonemesh.name = "copy";
  //         scene.remove(scene.getChildByName("copy"));
  //         scene.add(clonemesh);

  //         var clonewireFrame = new WireframeGeometry(cloneGeometry);
  //         var cloneline = new LineSegments(clonewireFrame);
  //         cloneline.material.depthTest = true;
  //         cloneline.translateZ(20);
  //         scene.add(cloneline);

  //     }
  // },"clone")

  const planeGeometry = new THREE.PlaneGeometry(100, 100)
  const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xAAAAAA })
  const plane = new THREE.Mesh(planeGeometry, planeMaterial)

  plane.rotation.x = -0.5 * Math.PI
  plane.position.set(15, 0, 0)
  plane.receiveShadow = true

  scene.add(plane)

  camera.position.x = -30
  camera.position.y = 40
  camera.position.z = 30
  camera.lookAt(scene.position)

  cube.rotation.x += 0.80
  cube.rotation.y += 0.80

  const spotLight = new THREE.SpotLight(0xFFFFFF)
  spotLight.position.set(-60, 40, -65)
  spotLight.castShadow = true
  spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024)
  spotLight.shadow.camera.far = 130
  spotLight.shadow.camera.near = 40

  scene.add(camera)
  // If you want a more detailled shadow you can increase the
  // mapSize used to draw the shadows.
  // spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
  scene.add(spotLight)

  const ambienLight = new THREE.AmbientLight(0xcccccc)
  scene.add(ambienLight)

  // render.render(scene,camera);

  render.setAnimationLoop(animation)
  function animation () {
    stats.update()
    showcube.scale.set(ctrlObj.scaleX, ctrlObj.scaleY, ctrlObj.scaleZ)
    showcube.position.set(ctrlObj.positionX, ctrlObj.positionY, ctrlObj.positionZ)
    showcube.rotation.set(ctrlObj.rotationX, ctrlObj.rotationY, ctrlObj.rotationZ)
    showcube.visible = ctrlObj.visible
    showcube.translateX(ctrlObj.translateX)
    showcube.translateY(ctrlObj.translateY)
    showcube.translateZ(ctrlObj.translateZ)

    render.render(scene, camera)
  }

  return { camera, render, scene }
}

export {
  createCourse07
}
